<template>
  <div class="bg" :style="{ filter: 'blur(' + blur + ')', backgroundImage: 'url(' + bgImage + ')' }">
    <!-- <div class="absolute right-50 top-20 text-2xl text-shadow-md text-white">{{ sc }}</div>
    <div class="absolute right-50 top-35 text-2xl text-shadow-md text-white">{{ '——' + zz }}</div> -->
  </div>
</template>

<style scoped lang="scss">
.bg {
  background-color: #000;
  position: fixed;
  object-fit: cover;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 0;
  background-size: cover;
  background-repeat: no-repeat;
}
</style>
<script>
import ax from '@/helper/axios.js'
export default {
  props: ['blur'],
  data() {
    return {
      bgImage: new URL("../asset/img/bg2.png", import.meta.url).href,
      sc: '',
      zz: ''
    };
  },
  async created() {
    // const result = await ax.get('/5001/api/mainControllers/GetPoemAsync');
    // console.log('result.value2', result);
    // this.sc = result.content;
    // this.zz = result.author;
    // setInterval(async () => {
    //   const result = await ax.get('/5001/api/mainControllers/GetPoemAsync');
    //   console.log('result.value2', result);
    //   this.sc = result.content;
    //   this.zz = result.author;
    // }, 600000);
  },
};
</script>